<template>
  <div class="top">
    <div class="left">
      <div class="box">
        <div class="one">Contact Us</div>
        <div class="three">Find the best way to get help and connect with USPS®. Fill out a short form or get tips to fix some of the most common issues right from your computer.</div>
        <div class="three">If you still need more help, see the contact information for technical support, Postal Store orders, and more.</div>
      </div>
    </div>
    <div class="right">
      <img src="../../assets/image/hero-contact-us.jpg"/>
    </div>
  </div>
  <div class="threeBox">
    <div class="box">
      <div class="title"><a href="#">Email Us</a></div>
      <div class="text">Use our online form to answer a few questions about your issue. Please provide as much detail as you can.</div>
    </div>
    <div class="box" style="margin-left: 20px;">
      <div class="title"><a href="#">Find a Post Office</a></div>
      <div class="text">Find the nearest USPS location by city and state or ZIP Code™. Get contact information, hours, and more.</div>
    </div>
    <div class="box" style="margin-left: 20px;">
      <div class="title"><a href="#">Check Postal Holidays</a></div>
      <div class="text">Postal facilities are closed on federal holidays. See a list of all upcoming USPS holidays and events.</div>
    </div>
  </div>
  <div class="card">
        <div class="title">Contact USPS</div>
        <div class="box" v-for="item in cardList">
          <div class="left">
            <div class="title">{{ item.title }}</div>
            <div class="text">{{ item.text }}</div>
            <div class="a" v-if="item.a.length>0"><a href="#">Learn More</a> </div>
          </div>
          <div class="right">
            <el-button>Learn More</el-button> 
          </div>
        </div>
      </div>
</template>
<script setup>
import iconSeacheOne from '../../assets/icon/seache-one.vue'

import {ref} from 'vue'

const cardList=ref([
  {
    title:'Standard Forward Mail & Change of Address',
    text:'After your change of address request is approved, you\'ll get confirmation as well as instant access to valuable coupons provided by third-party retailers in your area. Your change of address request lasts for 12 months, but you can pay to extend it for 6, 12, or 18 more months.',
    button:'Learn More',
    a:'',
  },
  {
    title:'Premium Forwarding Mail',
    text:'Taking a long vacation or an out-of-town assignment? For a weekly fee, you can have most mail sent to you each week with our Premium Forwarding Service Residential®. The temporary service is available for periods as short as 2 weeks and up to 1 year.',
    button:'Start Premium Forwarding',
    a:'1',
  },
  {
    title:'USPS Package Intercept',
    text:'With USPS Package Intercept® service, you can redirect domestic packages, letters, and flats with a tracking or extra services barcode as long as the items have not yet been delivered or released for delivery. Either the sender or the recipient can request to have a shipment redirected as Priority Mail® back to the sender\'s address or to a Post Office™ location as a Hold For Pickup.',
    button:'Redirect a Package',
    a:'1',
  },
  {
    title:'Reserve a PO Box',
    text:'Want to separate home and business mail or keep your address private? Reserving a PO Box™ is a great way to get your mail when and where you want it. PO Boxes are available in a range of costs and sizes. Just find one online near you, complete the application, pay with a credit card, and bring the printed form, your emailed receipt, and two IDs to the Post Office.',
    button:'Reserve a PO Box',
    a:'',
  },
  {
    title:'USPS Hold Mail',
    text:'If you\'re going out of town for a while, you can submit a USPS Hold Mail® request online and we\'ll keep your mail safely at your local Post Office until you return. You can schedule the service up to 30 days in advance of your date or by 2 AM CST (Mon.–Sat.) on the start date. For enhanced security, USPS now requires you to create or sign in to your USPS.com account to verify your identity and current address before submitting a new online USPS Hold Mail request.',
    button:'Hpld Your Mail',
    a:'1',
  },
  {
    title:'Hold For Pickup',
    text:'Whether you’re shipping from a retail store or printing your own shipping label with postage, you can always elect to Hold For Pickup. Hold For Pickup allows the recipient to collect a package at the local Post Office. If you\'re the recipient and you\'d like to redirect an incoming package to a Post Office for pickup, you can select Hold For Pickup using USPS Package Intercept®.',
    button:'Get Started',
    a:'',
  },
  {
    title:'Schedule Redelivery Service',
    text:'If we missed you when we tried to deliver your package or mail, you can get it redelivered by making a request online. Use the tracking barcode for your item and schedule Redelivery on a day that\'s more convenient for you. In select markets, recipients can also schedule Redelivery to a USPS® Smart Locker. If you have your tracking number, you can also schedule Redelivery via USPS Tracking®.',
    button:'Schedule a Redelivery',
    a:'',
  },
  {
    title:'USPS Delivery Instructions*',
    text:'If your package doesn’t fit in your mailbox and you won’t be home to receive it, you can provide USPS Delivery Instructions online and authorize '+
    'your carrier to leave it in a specified location. Just track your package and select “Delivery Instructions.” You can request that your package be left '+
    'with a neighbor or held at a Post Office for pickup. For the cost of additional postage, you can have your package sent to a different domestic address. '+
    'You can also change your shipping service option, upgrading to Priority Mail Express® service or Priority Mail® service, as well as add insurance and extra '+
    'services.** * Service is only available for packages sent domestically.** Not available for packages sent to APO addresses. Other restrictions may apply.',
    button:'Get Started',
    a:'',
  },
])
</script>
<style scoped>
img{
  width: 100%;
  height: 100%;
}
.top{
  width: 100%;
  /* height: 350px; */
  overflow-wrap: break-word;
  background-color: #f7f7f7;
  /* background-color: #333366; */
  /* overflow: hidden; */
  display: flex;
  /* flex-direction: row; */
  .left{
    width: 55%;
    height: 100%;
    /* background-color: yellowgreen; */
    .box{
      width: 630px;
      height: 100%;
      /* background-color: yellow; */
      float: right;
      .one{
        width: 100%;
        height: 50px;
        text-align: left;
        margin-top: 40px;
        /* background-color: antiquewhite; */
        font-family: "HelveticaNeueW02-75Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 32px;
        font-weight: 700;
        line-height: 36px;
        color: #333366;
      }
      .two{
        width: 100%;
        /* height: 40px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 10px;
        font-size: 19px;
        font-weight: 600;
        color: #333366;
      }
      .three{
        width: 100%;
        /* height: 40px; */
        overflow-wrap: break-word;
        text-align: left;
        margin-top: 17px;
        /* background-color: rgb(50, 195, 205); */
      }
      .four{
        width: 610px;
        /* height: 40px; */
        overflow-wrap: break-word;
        /* text-align: left; */
        margin-top: 17px;
        padding-left: 20px;
        /* background-color: yellowgreen; */
        ul li{
          /* background-color: #333366; */
          margin-top: 11px;
          a{
            color: rgb(65, 127, 180);
          }
        }
        margin-bottom: 20px;
      }
    }
  }
  .right{
    width: 45%;
    height: 350px;
    background-color: rgb(202, 125, 23);
  }
}
.threeBox{
      width: 1170px;
      height: 170px;
      /* background-color: #333366; */
      margin: 30px auto 0;
      display: flex;
      /* align-items: center; */
      /* justify-content: center; */
      flex-direction: row;
      .box{
        width: 390px;
        height: 100%;
        /* margin: 0 auto; */
        /* background-color: #4889be; */
        .title{
          width: 100%;
          height: 60px;
          line-height: 60px;
          /* background-color: #707075; */
          text-align: center;
          a{
            font-size: 28px;
            font-weight: 600;
            color: #3a74a3;
          }
        }
        .text{
          width: 100%;
          height: 110px;
          /* background-color: yellow; */
          text-align: center;
        }
      }
    }
  .card{
      width: 1170px;
      margin: 0 auto 50px;
      overflow-wrap: break-word;
      .title{
        width: 100%;
        height: 50px;
        font-size: 25px;
        font-weight:bold;
        color: #333366;
        /* background-color: #bd4747; */
      }
      .box{
        width: 100%-20px;
        /* height: ; */
        min-height: 130px;
        overflow-wrap: break-word;
        border-radius: 6px;
        /* overflow: hidden; */
        border: 5px solid #c2c1c1;
        border-left: 5px solid #333366;
        padding: 20px;
        margin-top: 10px;
        /* background-color: violet; */
        display: flex;
        .left{
          width: 67%;
          /* height: ; */
          overflow-wrap: break-word;
          /* background-color: turquoise; */
          /* margin-right: 20px; */
          .title{
            width: 100%;
            height: 30px;
            font-size: 16.5px;
            /* background-color: #c2c1c1; */
          }
          .text{
            width: 100%;
            overflow-wrap: break-word;
            /* background-color: yellowgreen; */
            margin-top: 6px;
            margin-bottom: 20px;
          }
          .a{
            margin-bottom: 25px;
            /* background-color: #116ea3; */
            a{
            font-size: 17px;
            font-weight: 600;
            color: #116ea3;
            /* margin-bottom: 100px; */
            /* padding-bottom: 20px; */
          }
        }
        }
        .right{
          width: 30%;
          overflow-wrap: break-word;
          /* background-color: blueviolet; */
          .el-button{
            width: 250px;
            height: 45px;
            background-color: #333366;
            border: 0;
            color: #ffffff;
            font-size: 17px;
            font-weight: 700;
            margin-top: 50px;
            margin-left: 60px
          }
          .el-button:hover{
            background-color: #c2c1c1;
            color: #333366;
          }
        }
      }
    }
</style>